<template>
  <div style="height: 100%;width: 100%;display: flex">
    <div style="display: flex;align-items: center;height: 100%;flex: 1;">
      <div style="margin-top: 20px">
        {{ headModel.leftName }}
        <br>
        {{ headModel.leftTime }}
      </div>
    </div>
    <div
        style="background-image: url('public/images/head-bac.png');flex: 1.2;background-size: 100% 100%;display: flex;align-items: center;justify-content: center;font-size: 40px">
      {{ headModel.title }}
    </div>
    <div style="display: flex;align-items: center;height: 100%;flex: 1;justify-content: flex-end">
      <div style="margin-top: 20px">
        {{ headModel.rightCity }} <span style="margin-left: 20px">
         {{ headModel.rightName }}
      </span>
      </div>
    </div>

  </div>
</template>
<script setup lang="ts">
// 2. 在代码中配置和使用
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
import {onBeforeUnmount, onMounted, ref} from "vue"; // 加载中文语言包
dayjs.locale('zh-cn')


const dateString = ref<string>('')
const timeString = ref<string>('')
const headModel = ref<any>({
  'leftName': dateString,
  'leftTime': timeString,
  'title': '宜来电充电桩数据信息平台',
  'rightName': '宜来电(湖北)智能科技',
  'rightCity': '全国'
})

let timer: any = null
// 更新时间函数
const updateTime = () => {
  const now = dayjs()
  dateString.value = now.format('YYYY年MM月DD日 dddd')
  timeString.value = now.format('HH:mm:ss')
}

// 生命周期
onMounted(() => {
  updateTime()
  timer = setInterval(updateTime, 1000)
})

onBeforeUnmount(() => {
  clearInterval(timer) // 清除定时器防止内存泄漏
})
</script>
<style scoped>

.zigzag-line {
  width: 100%;
  position: absolute;
  top: 0;
}

.zigzag-line path {
  animation: zigzag 3s linear infinite;
}

@keyframes zigzag {
  0% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: -180;
  }
}

</style>